<template>
  <div class="inner-wrapper">
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>物理磁盘</el-breadcrumb-item>
            <el-breadcrumb-item>全部</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <h2 class="form-caption">显示属性</h2>
    <el-row>
      <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="SHOW ATTRIBUTES" name="1">
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                prop="date"
                label="INDEX"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="ENCL INDEX"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="ENCL POSITION">
              </el-table-column>

              <el-table-column
                prop=""
                label="DISK SLOT">
              </el-table-column>
              <el-table-column
                prop="address"
                label="TYPE">
              </el-table-column>
              <el-table-column
                prop="address"
                label="SPEED(RPM)">
              </el-table-column>
              <el-table-column
                prop="address"
                label="POOL NAME">
              </el-table-column>
              <el-table-column
                prop="address"
                label="HEALTH">
              </el-table-column>
              <el-table-column
                prop="address"
                label="PD STATE">
              </el-table-column>
              <el-table-column
                prop="address"
                label="MEMBER STATE">
              </el-table-column>
              <el-table-column
                prop="address"
                label="CAPACITY(GB)">
              </el-table-column>
              <el-table-column
                prop="address"
                label="SED">
              </el-table-column>
              <el-table-column
                prop="address"
                label="CYCLE ABLE">
              </el-table-column>
              <el-table-column
                prop="address"
                label="VENDOR ID">
              </el-table-column>
              <el-table-column
                prop="address"
                label="PRODUCT ID">
              </el-table-column>
              <el-table-column
                prop="address"
                label="PRODUCT REVISION">
              </el-table-column>
              <el-table-column
                prop="address"
                label="BLOCK SIZE">
              </el-table-column>

            </el-table>
          </el-collapse-item>
        <el-collapse-item title="SHOW DIVERSITY INVENTORY" name="2">
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="date"
              label="INDEX"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="ENCL INDEX"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="ENCL POSITION">
            </el-table-column>

            <el-table-column
              prop=""
              label="DISK SLOT">
            </el-table-column>
            <el-table-column
              prop="address"
              label="TYPE">
            </el-table-column>
            <el-table-column
              prop="address"
              label="SPEED(RPM)">
            </el-table-column>
            <el-table-column
              prop="address"
              label="POOL NAME">
            </el-table-column>
            <el-table-column
              prop="address"
              label="HEALTH">
            </el-table-column>
            <el-table-column
              prop="address"
              label="PD STATE">
            </el-table-column>
            <el-table-column
              prop="address"
              label="MEMBER STATE">
            </el-table-column>
            <el-table-column
              prop="address"
              label="CAPACITY(GB)">
            </el-table-column>
            <el-table-column
              prop="address"
              label="SED">
            </el-table-column>
            <el-table-column
              prop="address"
              label="CYCLE ABLE">
            </el-table-column>
            <el-table-column
              prop="address"
              label="VENDOR ID">
            </el-table-column>
            <el-table-column
              prop="address"
              label="PRODUCT ID">
            </el-table-column>
            <el-table-column
              prop="address"
              label="PRODUCT REVISION">
            </el-table-column>
            <el-table-column
              prop="address"
              label="BLOCK SIZE">
            </el-table-column>

          </el-table>
        </el-collapse-item>
        <el-collapse-item title="SHOW SUMMARY" name="3">
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="date"
              label="INDEX"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="ENCL INDEX"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="ENCL POSITION">
            </el-table-column>

            <el-table-column
              prop=""
              label="DISK SLOT">
            </el-table-column>
            <el-table-column
              prop="address"
              label="TYPE">
            </el-table-column>
            <el-table-column
              prop="address"
              label="SPEED(RPM)">
            </el-table-column>
            <el-table-column
              prop="address"
              label="POOL NAME">
            </el-table-column>
            <el-table-column
              prop="address"
              label="HEALTH">
            </el-table-column>
            <el-table-column
              prop="address"
              label="PD STATE">
            </el-table-column>
            <el-table-column
              prop="address"
              label="MEMBER STATE">
            </el-table-column>
            <el-table-column
              prop="address"
              label="CAPACITY(GB)">
            </el-table-column>
            <el-table-column
              prop="address"
              label="SED">
            </el-table-column>
            <el-table-column
              prop="address"
              label="CYCLE ABLE">
            </el-table-column>
            <el-table-column
              prop="address"
              label="VENDOR ID">
            </el-table-column>
            <el-table-column
              prop="address"
              label="PRODUCT ID">
            </el-table-column>
            <el-table-column
              prop="address"
              label="PRODUCT REVISION">
            </el-table-column>
            <el-table-column
              prop="address"
              label="BLOCK SIZE">
            </el-table-column>

          </el-table>
        </el-collapse-item>
      </el-collapse>

    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">

</style>
